<template>
  <div class="body">
    <div v-for="(item, index) in list"
         :key="index">
      <van-notice-bar
        mode="link"
        @click="display(index)"
        :speed = 40
      >
        {{item.include}}
      </van-notice-bar>
      <van-popup v-model="show"
                 position="bottom"
                 class="popup"
                 v-if="item.flag">
        <real-message
          :msg="item.current"
          :head="item.head"
          :include="item.include"
          @giveMsg="change($event)"
        ></real-message>
      </van-popup>
    </div>
  </div>
</template>

<script>
  import router from '@/router/index'
  import RealMessage from './Info/RealMessage'
  import {NoticeBar, Popup} from 'vant';

  export default {
    name: "PersonalSystemcall",
    components: {
      [NoticeBar.name]: NoticeBar,
      [Popup.name]: Popup,
      RealMessage
    },
    data() {
      return {
        list: [
          {
            "current": "Notice",
            "head": "系统通知",
            "include": "通知系统是网站信息传播机制的重要的一部分，足够写一大章来说明。本文只梳理设计原则，后续相关内容会持续更新。 这里的通知包括但不限于公告、提醒或消息（不同使用场景下的功能定义不同）。\n" +
            "            关于各客户端平台（ios、android、wp等）的通知机制，在其交互设计指南中有更详细的说明，大家可自行参考。",
            "flag": false
          },
          {
            "current": "Notice",
            "head": "系统通知",
            "include": "通知系统是网站信息传播机制的重要的一部分，足够写一大章来说明。本文只梳理设计原则，后续相关内容会持续更新。 这里的通知包括但不限于公告、提醒或消息（不同使用场景下的功能定义不同）。\n" +
            "            关于各客户端平台（ios、android、wp等）的通知机制，在其交互设计指南中有更详细的说明，大家可自行参考。",
            "flag": false
          },
          {
            "current": "Notice",
            "head": "系统通知",
            "include": "通知系统是网站信息传播机制的重要的一部分，足够写一大章来说明。本文只梳理设计原则，后续相关内容会持续更新。 这里的通知包括但不限于公告、提醒或消息（不同使用场景下的功能定义不同）。\n" +
            "            关于各客户端平台（ios、android、wp等）的通知机制，在其交互设计指南中有更详细的说明，大家可自行参考。",
            "flag": false
          }
        ],
        show: false,
      }
    },
    methods: {
      display(i) {
        let _this = this;
        _this.show = true;
        _this.list[i].flag = true;
      },
      reset() {
        let _this = this;
        for (let j in _this.list) {
          _this.list[j].flag = false;
        }
      },
      change(msg) {
        let _this = this;
        _this.show = msg;
      }
    },
    watch: {
      // 检查url是否变化
      "show": function (val, oldVal) {
        let _this = this;
        if (!val) {
          _this.reset();
        }
      },
      // 深度观察监听
      deep: true
    },
  }
</script>

<style scoped>

  .member-nav li p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 75%;
    margin: 0 0 0 13%;
    font-size: 12px;
  }

  .popup {
    width: 100%;
    height: 70%;
  }

</style>
